<template>
	<view class="time-box">
		<navBar title="选择时针位置"></navBar>
		<block>
				<view class="box-container">
					<u-checkbox-group placement="column" @change="checkboxChange">
						<view class="container-item" v-for="(item,index) in userList" :key="item.id">
							<view>
								<view class="item-label">{{ item.name}}</view>
							</view>
							<view class="">
								<u-checkbox :name="item.id" :checked="item.isCheck" shape="circle"></u-checkbox>
							</view>
						</view>
					</u-checkbox-group>
				</view>
		</block>
		<view class="outer-btn">
			<u-button type="primary"  class="button" text="确定" @click="saveUser"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "selectClockwisePosition",
		data() {
			return {
				userList: [],
			}
		},
		watch: {

		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('getTimePosition', (data) => {
				this.checkUserList = data.data || []
				this.getUserList()
			})
			this.eventChannel = eventChannel

		},
		methods: {
			// 获取人员数据(项目经理)
			async getUserList() {
				this.userList = [
					{id:'1点',name:'1点'},{id:'2点',name:'2点'},{id:'3点',name:'3点'},{id:'4点',name:'4点'},
					{id:'5点',name:'5点'},{id:'6点',name:'6点'},{id:'7点',name:'7点'},{id:'8点',name:'8点'},
					{id:'9点',name:'9点'},{id:'10点',name:'10点'},{id:'11点',name:'11点'},{id:'12点',name:'12点'},
					] || []
				this.filterUserList()
			},
			// 过滤选中的用户
			filterUserList() {
				this.userList.forEach(item => {
					if (this.checkUserList.includes(item.id)) {
						item.isCheck = true
					}
				})
			},

			checkboxChange(array) {
				this.checkUserList = array || []
			},
			saveUser() {
				const arr = this.checkUserList || [];
				console.log(arr.length, 'arr')
				let userList = this.userList.filter(item => arr.includes(item.id))
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("setTimeEvent", {
							data: userList
						})
					}
				});

			}

		}
	}
</script>

<style lang="scss" scoped>
	.time-box {
		.box-container {
			.container-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F5F7FAFF;
				padding: 30rpx 50rpx;
				.item-label {
					font-size: 30rpx;
				}
			}
		}
		.outer-btn {
			height: 92rpx;
			.button {
				height: 92rpx;
				line-height: 92rpx;
				background: #2F80ED;
				color: #FFFFFF;
				text-align: center;
				font-size: 32rpx;
				position: fixed;
				bottom: 0;
			}
		}
	}
</style>
